<template>
  <HeadContainer class="mine-earn-withdrawal-history bg-background" title="创作者合约" @back="back">
    <div>
      <div class="info">
        <p>重要信息 - 请阅读</p>
        <p>验证和验证您的年龄和身份 - 使用面部匹配识别</p>
        <p>概述：</p>
        <p>
          如果您想在 Fantasi 上创建创建者帐户，Fantasi 需要： (i) 验证您的年龄； (ii)
          验证并验证您的身份。这是为了确保所有 Fantasi 创作者都是他们所说的人，并且年满 18 岁。 未经您的同意，Fantasi
          无法为此目的处理您的生物识别数据。
        </p>
        <p>确保网络安全是Fantasi的核心价值。 Fantasi 进行的年龄和身份检查对于确保 Fantasi 社区的安全至关重要。</p>
      </div>
      <div class="info2">
        <p>
          <span>1.</span>
          <span>在您上传内容或作为联属会员赚钱之前，我们需要验证您的身份。</span>
        </p>
        <p>
          <span>2.</span>
          <span>此过程不到 5 分钟，并且完全保密。</span>
        </p>
        <p>
          <span>3.</span>
          <span>在此过程中，您将被要求拍摄您和您的身份证件的照片。</span>
        </p>
        <p>
          <span>4.</span>
          <span>确保您的网络摄像头或手机摄像头正常工作并且您的身份证件在附近。</span>
        </p>
      </div>
      <div class="hint">
        <p>如果在此过程中出现问题，您将能够从此页面重新启动或继续验证。</p>
        <p>您还可以通过发送电子邮件至<span>support@sex.com</span>来联系支持人员</p>
      </div>
      <div class="submit-wrap">
        <div class="primary-btn w-100 d-flex justify-center align-center line-height-140">同意</div>
      </div>
    </div>
  </HeadContainer>
</template>

<script setup>
import { $t } from '@/i18n/index.js'
import HeadContainer from '@/components/layout/HeadContainer.vue'

const emits = defineEmits('toPage')

const back = () => {
  emits('toPage', 3, 'withdrawal-request')
}
</script>

<style scoped lang="scss">
.info {
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  padding: 16px 16px 6px 8px;

  p {
    color: #d7d7d7;
    font-size: 12px;
  }
}

.info2 {
  p {
    color: #ffffff;
    font-size: 14px;
    margin: 16px 0;
    display: flex;

    span {
      line-height: 19.6px;
    }
  }
}

.hint {
  padding: 16px;
  background: #333546;
  border-radius: 10px;
  font-size: 14px;
  letter-spacing: 0.2px;

  & > p:first-child {
    margin-bottom: 16px;
    line-height: 19.6px;
  }

  span {
    color: #f42c52;
  }
}

.submit-wrap {
  border-top: 0.5px solid #ffffff45;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
